<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<!-- Bootstrap -->
<link href="${pageContext.request.contextPath}/javascript/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/javascript/bootstrapvalidatr/css/bootstrapValidator.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/javascript/jQuery-1.12.4.js"></script>
<script src="${pageContext.request.contextPath}/javascript/bootstrap/js/bootstrap.js"></script>
<script src="${pageContext.request.contextPath}/javascript/bootstrapvalidatr/js/bootstrapValidator.js"></script>
<script type="text/javascript"
	src="../../javascript/My97DatePicker/WdatePicker.js"></script>
<link href="../../assets/css/maincss.css" rel="stylesheet" />
<link href="../../assets/css/but.css" rel="stylesheet" />
</head>
<body>
	<h3>添加订单</h3>
	
	<table id="model" style="display: none">
		<tr>
			<td>
				<select class="form-control" id="products" name="products" >
					<option value="0">选择商品</option>
				</select>
			</td>
			<td>
				<input class="form-control" id="quantity" name="quantity" type="number"  />
			</td>
			<td>
				<select class="form-control" id="discount" name="discount">
					<option value="0">不打折</option>
					<option value="0.95">95折</option>
					<option value="0.85">85折</option>
				</select>
			</td>
			<td>
				<button class="btn btn-danger" name="del" value="del" class="but red">删除</button>
			</td>
		</tr>
	</table>


<div>
	<form id="myform"  class="navbar-form navbar-center" role="search">
			<div class="form-group">
				<input type="text" class="form-control" name="orderID"
					placeholder="订单编号">
			</div>
			<div class="form-group">
				<input type="text" class="form-control" id="orderDate" name="orderDate"
					placeholder="下单时间"  onclick="WdatePicker()" >
			</div>
			<div class="form-group">
				<select name="customers" id="customers" class="form-control">
					<option value="0">选择客户</option>
				</select>
			</div>
			<div class="form-group">
				<select name="employees" id="employees" class="form-control">
					<option value="0">选择员工</option>
				</select>
			</div>
			<br />
		<table id="myTable" class="table table-hover" style="text-align: center;">
			<tr>
				<td>产品名称</td>
				<td>数量</td>
				<td>是否折扣</td>
				<td>操作</td>
			</tr>
			<tr>
				<td>
				<select class="form-control" id="products" name="products" >
						<option value="0">选择商品</option>
				</select>
				</td>
				<td>
					<div class="form-group">
						<input class="form-control" id="quantity" name="quantity" type="number" />
					</div>
				</td>
				<td>
				<select class="form-control" id="discount" name="discount">
						<option value="0">不打折</option>
						<option value="0.95">95折</option>
						<option value="0.85">85折</option>
				</select>
				</td>
				<td>
					<button class="btn btn-danger" name="del" value="del" >删除</button>
				</td>
			</tr>
			<tr>
				<td colspan="4">
					<input class="btn btn-info" type="button"  name="add" value="增加数据" />
					&nbsp;&nbsp;&nbsp;
					<input class="btn btn-success" type="button"  name="sub" value="提交订单" />
				</td>
			</tr>
		</table>
	</form>
					<!-- <button name="add" value="add" class="but green" style="width: 65px;">增加数据</button> -->
					<!-- &nbsp;&nbsp;&nbsp; -->
					<!-- <button name="sub" value="sub" class="but green" style="width: 65px;">提交订单</button> -->
</div>
</body>

<script>

	// ajax提交,获取 products数据
	$(function(){
		$.ajax({
			type: "GET",
			url: "OrderServlet",
			data : "op=findProducts",
			dataType: "JSON",
			success: function(ProdResult){
			   for(var i = 0;i < ProdResult.length;i++){
				   $("select[name='products']").append("<option value='"+ProdResult[i].productId+"'>"+ProdResult[i].productName+"</option>");
			   }
			   
			},
			error:function(){}
		});
		
		
	});
	
	// ajax提交,获取employees数据
	$(function(){
		$.ajax({
			type: "GET",
			url: "OrderServlet",
			data : "op=findEmps",
			dataType: "JSON",
			success: function(EmpResult){
				// alert("返回的数据 : "+EmpResult);
			   for(var i = 0;i < EmpResult.length;i++){
				   $("select[name='employees']").append("<option value='"+EmpResult[i].empID+"'>"+EmpResult[i].empName+"</option>");
			   }
			   
			},
			error:function(){}
		});
	});

	// ajax提交,获取customers数据
	$(function(){
		$.ajax({
			type: "GET",
			url: "OrderServlet",
			data : "op=findCusts",
			dataType: "JSON",
			success: function(CustResult){
				// alert("返回的数据 : "+EmpResult);
				
				$("input[name='orderID']").val(CustResult[0]);
				var arrCust = CustResult[1];
			    for(var i = 0;i < arrCust.length;i++){
				    $("select[name='customers']").append("<option value='"+arrCust[i].customerID+"'>"+arrCust[i].customerName+"</option>");
			    }
			   
			},
			error:function(){}
		});
	});
	
	// 全屏点击事件
	$(document).click(function(e) {
		var op = e.target.value;
		// alert(op);
		if (op == "增加数据") {
			$("#model tr").clone().insertBefore("tr:last");
		} else if (op == "del") {
			$(e.target).parent().parent().remove();
		} else if (op == "提交订单") {
			
			// 数据提交前判断是否有重复数据
			var f = false;
			var arr = $("#myTable #products");
			for(var i = 0; i < arr.length; i++){
				for (var j = i + 1; j < arr.length; j++) {
					if(arr[i].value == arr[j].value){
						f = true;
						break;
					}
				}
			}
			if (f) {
				alert("所选商品中有重复,请重新选择.");
			} else {
				
				// 提交之前必须校验数据,无误后再提交
				if(clickAllData()){
					// 确定数据无误,,提交数据
					$.ajax({
						type: "POST",
						url: "OrderServlet?op=doAddOrder",
						data : $("#myform").serialize(),
						// dataType: "JSON",
						success: function(addtResult){
							// alert(addtResult);
							if(addtResult == "true"){
								alert("订单添加成功");
								location.href="showAllOrders.jsp";
							} else if(addtResult == "false"){
								alert("订单添加失败");
								history.back();
							}
												   
						},
						error:function(){}
					});
				} else {
					alert("有数据未正常填写,请重新输入.");
					/* // 确定数据无误,,提交数据
					$.ajax({
						type: "POST",
						url: "OrderServlet?op=doAddOrder",
						data : $("#myform").serialize(),
						// dataType: "JSON",
						success: function(addtResult){
							// alert(addtResult);
							if(addtResult == "true"){
								alert("订单添加成功");
								location.href="showAllOrders.jsp";
							} else if(addtResult == "false"){
								alert("订单添加失败");
								history.back();
							}
												   
						},
						error:function(){}
					}); */
				}
				
				
				
				
			}
			
		}
	});
	
	
	// 校验表单
	function clickAllData(){
		
		if($("#orderDate").val() == "" || $("#orderDate").val() == null){
			alert("时间不能为空");
			return false;
		}
		
		for (var i = 0; i < $("#myTable input[name='quantity']").length; i++) {
			if($("#myTable input[name='quantity']")[i].value <= 0 || $("#myTable input[name='quantity']")[i].value == null || $("#myTable input[name='quantity']")[i].value == "" || !/^\d+$/.test($("#myTable input[name='quantity']")[i].value)){
				alert("请正确填写数量值");
				return false;
			}
		}
		
		for (var i = 0; i < $("#myform #customers").length; i++) {
			if($("#myform #customers")[i].value == 0 || $("#myform #customers")[i].value == null || $("#myform #customers")[i].value == ""){
				alert("请选择客户");
				return false;
			}
		}
		
		for (var i = 0; i < $("#myform #employees").length; i++) {
			if($("#myform #employees")[i].value == 0 || $("#myform #employees")[i].value == null || $("#myform #employees")[i].value == ""){
				alert("请选择客户");
				return false;
			}
		}
		
		for (var i = 0; i < $("#myTable #products").length; i++) {
			if($("#myTable #products")[i].value == 0 || $("#myTable #products")[i].value == null || $("#myTable #products")[i].value == ""){
				alert("请选择商品");
				return false;
			}
		}
		
		return true;
	}
		
	
</script>
</html>